<template>
    <LayOut :bread="[{
        title: '音乐',
    }]">
        <div class="music-viewer">
            <el-tabs v-model="activeName" class="demo-tabs" type="border-card" @tab-click="handleClick">
                <el-tab-pane label="流行音乐" name="first">
                    <div class="music-content">
                        <el-card class="music-item">
                            <template #header>Yummy hamburger</template>
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                        <el-card class="music-item">
                            <!-- <template #header>Yummy hamburger</template> -->
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                        <el-card class="music-item">
                            <!-- <template #header>Yummy hamburger</template> -->
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                        <el-card class="music-item">
                            <!-- <template #header>Yummy hamburger</template> -->
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                        <el-card class="music-item">
                            <!-- <template #header>Yummy hamburger</template> -->
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                        <el-card class="music-item">
                            <!-- <template #header>Yummy hamburger</template> -->
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                                style="width: 100%" />
                        </el-card>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="轻音乐" name="second">Config</el-tab-pane>
            </el-tabs>
        </div>
    </LayOut>
</template>
<script lang="ts" setup>
import LayOut from '@/components/LayOut.vue';
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style lang="less" scoped>
.demo-tabs>.el-tabs__content {
    // padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.music-content {
    display: flex;
    flex-wrap: wrap;

    .music-item {
        width: calc(20% - 20px);
        margin: 0 20px 20px 0;

        :nth-child(4n) {
            margin: 0;
        }
    }
}</style>